<!-- 
  watchEffect()
    作用：与watch类似做监听的
    语法：
      const stop = watchEffect(effect, options)
        stop: 停止监听的一个函数
        effect: 监听的处理函数
          1. 默认会触发一次，会同步的收集依赖的数据
          2. 后续依赖的数据发生变化时，该函数会再次触发
          3. 该函数没有 newVal oldVal 这些东西
          4. 该函数接受一个参数 onCleanup .用于清理回调
             它的触发时机：除了第一次之外，后续 effect 要触发之前先触发 onCleanup 的回调
        options: 额外的配置项
          flush: 'pre' | 'post' | 'sync'
    
  watch与watchEffect有何区别
    1. 两者都是处理监听的
    2. watch 默认是懒执行的，而watchEffect是会默认执行一次的。
    3. watch 需要明确的传递需要监听的数据源,
      而watchEffect不需要明确监听数据源，而是在回调函数中同步的收集依赖。有点类似computed的感觉。
    4. 当要监听多份数据时，使用 watchEffect 更合适

  有一些额外的 watchEffect
    1. watchPostEffect    => watchEffect 开启了 flush 为 post
    2. watchSyncEffect    => watchEffect 开启了 flush 为 sync

 -->

<template>
  <div>
    <h1>watchEffect</h1>
    <p id="p">{{ msg }}</p>
    <input type="text" v-model="keyword" />
    <input type="text" v-model="msg" />
    <button @click="stop">停止 msg 的监听</button>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const keyword = ref('')
    const msg = ref('hello')

    watchEffect((onCleanup) => {
      console.log(keyword.value)

      const timer = setTimeout(() => {
        console.log('获取到数据了')
      }, 500)

      onCleanup(() => {
        clearTimeout(timer)
      })

      // 使用了 keyword ，那么当前 keyword 就会当成 该 effect 的一个依赖
      // console.log('effect', keyword.value)

      // 异步代码中使用的数据无法被收集成我的依赖
      // setTimeout(() => {
      //   console.log(msg.value)
      // })
    })

    const stop = watchEffect(
      () => {
        console.log('msg', msg.value)

        const pEl = document.getElementById('p')
        console.log(pEl?.innerHTML)
      },
      {
        flush: 'post'
      }
    )

    return {
      keyword,
      msg,
      stop
    }
  }
}
</script>
